<template>
  <el-card>
    <!-- 按钮 -->
    <el-button type="primary" :icon="Plus" style="margin-bottom: 20px" :disabled="!spuList.length" @click="saveSpuForm()" v-hasBtn="'btn.Spu.add'">添加SPU</el-button>
    <!-- 表格 -->
    <el-table :data="spuList" v-loading="loading" stripe border style="width: 100%">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column prop="spuName" label="SPU名称" />
      <el-table-column prop="description" label="SPU描述" />
      <el-table-column label="操作" align="center">
        <template v-slot="{row}">
          <el-button type="primary" :icon="Plus" size="small" title="添加SKU" @click="toSkuForm(row)"></el-button>
          <el-button type="primary" :icon="Edit" size="small" title="修改SPU" @click="updateSpuForm(row)"></el-button>
          <el-button type="info" :icon="InfoFilled" size="small" title="查看SKU" @click="showSkuList(row)"></el-button>
          <el-button type="danger" :icon="Delete" size="small" title="删除SPU" @click="deleteSpuInfo(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:currentPage="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20, 40]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      @size-change="getSpuPageList(1, val)"
      @current-change="getSpuPageList(val, pageSize)"
      style="margin-top: 20px"
    />
    <!-- SKU列表对话框 -->
    <el-dialog v-model="dialogTableVisible" :title="`${spuInfo.spuName} => SKU列表`">
      <el-table :data="skuList" height="600px">
        <el-table-column label="默认图片" align="center" fixed min-width="140px">
          <template v-slot={row}>
            <img :src="row.skuDefaultImg" :alt="row.skuName" style="width: 100px; height: 100px">
          </template>
        </el-table-column>
        <el-table-column property="skuName" label="名称" width="450px" />
        <el-table-column property="price" label="价格(元)" align="center" min-width="100px" />
        <el-table-column property="weight" label="重量(千克)" align="center" min-width="100px" />
      </el-table>
    </el-dialog>
  </el-card>
</template>
<script lang="ts">
export default {
  name: 'SpuList'
}
</script>
<script lang="ts" setup>
import {ref, onMounted, watch, reactive, nextTick} from 'vue'

// 引入图标组件
import { Delete, Edit, InfoFilled, Plus } from '@element-plus/icons-vue'
// 引入消息提示组件
import {ElMessage, ElMessageBox} from 'element-plus'

// 引入SPU相关的接口函数及接口类型
import {getSpuPageListApi, deleteSpuInfoByIdApi} from '@/api/product/spu'
import type {SpuPageListParamsModel, SpuListModel, SpuModel} from '@/api/product/model/spuModel'
// 引入SKU相关的接口函数及接口类型
import {getSkuListBySpuIdApi} from '@/api/product/sku'
import type {SkuListModel} from '@/api/product/model/skuModel'

// 引入分类仓库
import {useCategoryStore} from '@/stores/category'
const categoryStore = useCategoryStore()

// 引入Spu组件显示状态标识
import {SpuStatus} from '../SpuStatus'
// 引入Pubsub
import PubSub from 'pubsub-js'

// 接收父组件传递的方法
const emits = defineEmits(['changeIsShow'])

const loading = ref<boolean>(false) // 载入效果标识
const dialogTableVisible = ref(false) // SKU对话框是否展示标识
const total = ref(0) // 总数
const pageNo = ref(1) // 当前页码
const pageSize = ref(5) // 每页数据展示数量
const spuInfo = reactive<SpuModel>({
  id: undefined,
  spuName: '',
  description: '',
  spuSaleAttrList: [], // 销售属性对象数组
  spuImageList: [] // spu图片对象的数组
})
const spuList = ref<SpuListModel>([]) // 定义存储spu对象数组
const skuList = ref<SkuListModel>([]) // 定义存储sku对象的数组

// 获取SPU分页列表数据
const getSpuPageList = async (page: number = pageNo.value, limit: number = pageSize.value) => {
  // 更新页码 每页数据数量
  pageNo.value = page
  pageSize.value = limit
  loading.value = true
  const result = await getSpuPageListApi({ page, limit, category3Id: categoryStore._category3Id } as SpuPageListParamsModel)
  loading.value = false
  // 更新数据
  spuList.value = result.records
  total.value = result.total
}
// 监视三级分类Id 
watch(() => categoryStore.category3Id, (category3Id) => {
  // 判断id是否存在
  if (!category3Id) {
    spuList.value = []
    return
  }
  // 获取列表数据
  getSpuPageList(pageNo.value, pageSize.value)
}, {immediate: true})

// 新增SPU
const saveSpuForm = () => {
  emits('changeIsShow', SpuStatus.Spu_Form)
}
// 修改SPU
const updateSpuForm = (row: SpuModel) => {
  emits('changeIsShow', SpuStatus.Spu_Form)
  Object.assign(spuInfo, row)
  // 发布
  nextTick(() => {
    PubSub.publish('getSpuInfo', spuInfo)
  })
}
// 添加SKU
const toSkuForm = (row: SpuModel) => {
  emits('changeIsShow', SpuStatus.Sku_Form)
  Object.assign(spuInfo, row)
  nextTick(() => {
    PubSub.publish('getSpuId', spuInfo)
  })
}
// 查看SKU列表数据
const showSkuList = async (row: SpuModel) => {
  
  skuList.value = await getSkuListBySpuIdApi(row.id as number)
  // 显示对话框
  dialogTableVisible.value = true 
  // spuInfo.spuName = row.spuName
  Object.assign(spuInfo, row)
}
// 移除SPU
const deleteSpuInfo = (row: SpuModel) => {
  ElMessageBox.confirm(
    '该操作不可逆，确定要执行删除操作吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await deleteSpuInfoByIdApi(row.id as number)
      getSpuPageList()
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'warning',
        message: '取消删除',
      })
    })
}
// 组件挂载完毕
onMounted(() => {
  
})
</script>
<style scoped>
:deep(.el-overlay-dialog) {
  top: 100px
}
</style>